<template>
	<view class="numberSelector">
		<view class="mybtn" @click="setNum(1)"> <text class="txt">-</text> </view>
		<input class="myinput" type="number" v-model="num" disabled/>
		<view class="mybtn" @click="setNum(2)"> <text class="txt txt2">+</text> </view>
	</view>
</template>

<script>
	export default {
		name:"numberSelector",
		props:{
			value:Number,
		},
		data() {
			return {
				num:this.value || ''
			};
		},
		mounted() {
			this.num = this.value
		},
		methods:{
			setNum(flag){
				if(flag==1){
					if(this.num>1){
						this.num--
					}
				}else if(flag==2){
					this.num++
				}
				this.$emit('input',this.num)
				this.$emit('change',this.num)
			}
		}
		
	}
</script>

<style lang="scss" scoped>
	.numberSelector{
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		.mybtn{
			display: flex;
			align-items: center;
			justify-content: center;
			width: 60rpx;
			height: 60rpx;
			.txt{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100%;
				border: 1px solid #ddd;
				font-size: 40rpx;
				color: #333;
				font-weight: bold;
				border-top-left-radius:10rpx ;
				border-bottom-left-radius:10rpx ;
				&.txt2{
					border-radius: 0;
					border-top-right-radius:10rpx ;
					border-bottom-right-radius:10rpx ;
				}
			}
		}
		.myinput{
			display: block;
			flex: 1;
			height: 60rpx;
			text-align: center;
			border-top: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
		}
	}
</style>